<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="cartList.length == 0" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="item.id">
					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
						<view class="image-wrapper">
							<image :src="item.product && item.product.image[0]" class="loaded" mode="aspectFill" lazy-load @click="goProductDetail(item)"></image>
							<view class="yticon icon-xuanzhong2 checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view>
						</view>
						<view class="item-right">
							<text class="clamp title" @click="goProductDetail(item)">{{ (item.product && item.product.title) || '[商品不存在]' }}</text>
							<text class="attr">{{ item.product && item.sku.value }}</text>
							<view class="all-but">
								<view class="price-box">
									<text class="price" v-if="item.product.type==2">¥{{item.product && item.sku.score_price || 0}}</text>
									<text class="price" v-else>¥{{item.product && item.sku.price || 0}}</text>
									<!-- <text class="out-stock" v-if="item.quantity>item.sku.stock">仅剩{{item.sku.stock}}件</text> -->
								</view>
								<uni-number-box
									class="step"
									:min="1"
									:max="item.sku.stock"
									:value="item.quantity"
									:isMax="item.quantity >= item.sku.stock ? true : false"
									:isMin="item.quantity === 1"
									:index="index"
									@eventChange="numberChange"
								></uni-number-box>
							</view>
						</view>
						<!-- <text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text> -->
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked ? '/static/selected.png' : '/static/select.png'" id="gou" mode="aspectFit" @click="check('all')"></image>
					<label for="gou"><view class="clear-btn">全选</view></label>
					<!-- <view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
						清空
					</view> -->
				</view>
				<view class="total-box">
					<span class="pice_h">合计:</span>
					<text class="price">¥{{ total }}</text>
					<!-- <span class="pice_b">不含运费</span> -->
					<!-- <text class="coupon">
						已优惠
						<text>74.35</text>
						元
					</text> -->
				</view>
				<button type="primary" class="no-border confirm-btn" @click="deleteCartItem">删除</button>
				<button type="primary" style="border-left: 1px solid #fff;" class="no-border confirm-btn" @click="createOrder">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import uniNumberBox from '@/components/uni-number-box.vue';
export default {
	components: {
		uniNumberBox
	},
	data() {
		return {
			listid:[],//选中商品列表
			showof: false,
			// allChecked: true,
			// empty: false, //空白页现实  true|false
		};
	},
	onLoad() {
		this.getCartProducts();
	},
	watch: {
	},
	computed: {
		...mapState({
			user: state => state.user.userinfo,
			cartList: state => state.cart.products
		}),
		hasLogin() {
			let that = this;
			if(!that.user.id){
				that.cartList.length = 0;    
			}
			return that.user.id ? true : false;
		},
		total() {
			let total = 0
			let jitotal = 0 
			this.cartList.forEach((item, index) => { 
				if(item.product.type==2){
					if (item.checked) total += parseFloat(item.quantity) * parseFloat(item.sku.score_price)
					if (item.checked) jitotal += parseFloat(item.quantity) * parseFloat(item.sku.score_price)
				}else{
					if (item.checked) total += parseFloat(item.quantity) * parseFloat(item.sku.price)
				}
				
				
			})
			return total.toFixed(2);
		},
		allChecked() {
			let res = true;
			this.cartList.forEach((item, index) => {
				if (!item.checked) res = false;
			});
			return res;
		}
	},
	methods: {
		...mapActions(['getCartProducts', 'cartUpdateProduct', 'cartUpdateStatus', 'clearCartProducts']),
		...mapMutations(['CART_PRODUCT_CHECK_TOGGLE', 'CART_PRODUCT_CHECK_ALL', 'SAVE_CART_PRODUCT_QUANTITY']),
		navToLogin() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},
		//选中状态处理
		check(type, index) {
			if (type === 'item') {
				this.CART_PRODUCT_CHECK_TOGGLE(index)
			} else {
				this.CART_PRODUCT_CHECK_ALL(this.allChecked)
			}
		},
		//数量
		numberChange(data) {
			let item = this.cartList[data.index];
			let form = {
				sku_id: item.sku.id,
				quantity: data.number
			};
			this.cartUpdateProduct(form)
				.then(res => {
					this.SAVE_CART_PRODUCT_QUANTITY(data);
				})
				.catch(e => {});
		},
		//删除
		deleteCartItem() {
			uni.showModal({
				title: '',
				content: '确定要删除该商品吗？',
				success: (res) => {
					if(res.confirm){
						uni.showLoading();
						let deleid = [];
						this.cartList.forEach((item, index) => {
							if (item.checked) deleid.push(item.id);
						});
						this.$http.post('cart.delete', { ids: deleid }).then(res => {
							uni.hideLoading();
							this.getCartProducts();
						});
					}
				}
			})
		},
		goProductDetail(item) {
			if (!item.product) return;
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.product.id
			});
		},
		//清空
		clearCart() {
			uni.showModal({
				content: '清空购物车？',
				success: e => {
					if (e.confirm) {
						uni.showLoading();
						this.clearCartProducts()
							.then(res => {
								uni.hideLoading();
							})
							.catch(e => uni.hideLoading());
					}
				}
			});
		},
		//创建订单
		createOrder() {
			let data = [];
			this.cartList.forEach(item => {
				if (!item.product) {
					uni.showToast({
						title: '商品不存在',
						icon: 'none'
					});
					return;
				}
				if (item.checked) {
					data.push(item.id);
				}
			});
			let form = {
				ids: data
			};
			this.cartUpdateStatus(form).then(res => {
				uni.navigateTo({
					url: '/pages/order/createOrder'
				});
			});
		}
	},
	onPullDownRefresh() {
		this.getCartProducts()
			.then(res => {
				uni.stopPullDownRefresh();
			})
			.catch(e => uni.stopPullDownRefresh());
	}
};
</script>

<style lang="scss">
.container {
	padding-bottom: 134upx;
	background: #F6F6F6;	
	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2upx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16upx;
			}
		}
	}
}

/* 购物车列表项 */
.cart-list{
	padding-top: 10px;
}
.cart-item {
	display: flex;
	position: relative;
	padding: 30upx 40upx;
	margin: 10px;
	background: #fff;
	border-radius: 15px;
	.image-wrapper {
		width: 230upx;
		height: 230upx;
		flex-shrink: 0;
		position: relative;

		image {
			border-radius: 8upx;
		}
	}

	.checkbox {
		position: absolute;
		left: -16upx;
		top: -16upx;
		z-index: 8;
		font-size: 44upx;
		line-height: 1;
		padding: 4upx;
		color: $font-color-disabled;
		background: #fff;
		border-radius: 50px;
	}
	.all-but {
		display: flex;
		flex: 1;
	}
	.item-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		position: relative;
		padding-left: 30upx;

		.title {
			 // display: -webkit-box;
			 // overflow: hidden;
			 // text-overflow: ellipsis;
			 // word-wrap: break-word;
			 // white-space: normal !important;
			 // -webkit-line-clamp: 2;
			 // -webkit-box-orient: vertical;
	
			
			font-size: $font-base + 8upx;
			color: #000;
			height: 40upx;
			line-height: 40upx;
		}
		.price {
			font-size: $font-base + 8upx;
			color: $base-index-color;
			height: 40upx;
			line-height: 40upx;
		}

		.attr {
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			flex-direction: column;
			/* align-items: center; */

			.out-stock {
				color: red;
				font-size: $font-base;
			}
		}

		.price {
			height: 50upx;
			line-height: 50upx;
		}
	}

	.del-btn {
		padding: 4upx 10upx;
		font-size: 34upx;
		height: 50upx;
		color: $font-color-light;
	}
}

/* 底部栏 */
.action-section {
	/* #ifdef H5 */
	margin-bottom: 100upx;
	/* #endif */
	position: fixed;
	left: 30upx;
	bottom: 30upx;
	z-index: 95;
	display: flex;
	align-items: center;
	width: 690upx;
	height: 100upx;
	padding: 0 30upx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16upx;

	.checkbox {
		height: 52upx;
		position: relative;

		image {
			width: 52upx;
			height: 100%;
			position: relative;
			z-index: 5;
		}
	}

	.clear-btn {
		width: 63px;
		position: absolute;
		left: 26upx;
		top: 0;
		z-index: 4;
		height: 52upx;
		line-height: 52upx;
		padding-left: 38upx;
		font-size: $font-base;
		color: #606266;
	}

	.total-box {
		flex: 1;
		display: flex;
		/* flex-direction: column; */
		text-align: right;
		padding-right: 20upx;
		justify-content: flex-end;
		.price {
			font-size: $font-sm;
			color: $base-index-color;
		}
		.pice_h {
			font-size: $font-sm;
			color: $font-color-light;
		}
		.pice_b {
			font-size: 18upx;
			color: $font-color-light;
			padding-left: 8upx;
		}
		.coupon {
			font-size: $font-sm;
			color: $font-color-light;

			text {
				color: $font-color-dark;
			}
		}
	}

	.confirm-btn {
		padding: 0 38upx;
		margin: 0;
		height: 76upx;
		line-height: 76upx;
		font-size: $font-sm;
		background: $base-index-color;
		border-radius: 0px;
		/* box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72) */
	}
}

/* 复选框选中状态 */
.action-section .checkbox.checked,
.cart-item .checkbox.checked {
	color: $base-index-color;
}
</style>
